<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>湖北理工学院校园漫游</title>
  <!-- Tailwind CSS -->
  <script src="https://cdn.tailwindcss.com"></script>
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <link rel="stylesheet" href="styles.css">
</head>

<body class="bg-gray-100">
  <div class="container mx-auto px-4 py-8">
    <h1 class="text-3xl font-bold text-center text-gray-800 mb-8">湖北理工学院校园漫游</h1>

    <div class="control-panel">
      <div class="flex flex-wrap gap-4 mb-4">
        <button id="zoomIn" class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded">
          <i class="fas fa-search-plus"></i> 放大
        </button>
        <button id="zoomOut" class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded">
          <i class="fas fa-search-minus"></i> 缩小
        </button>
        <button id="reset" class="bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded">
          <i class="fas fa-redo"></i> 重置
        </button>
      </div>

      <div>
        <label class="block text-gray-700 mb-2">选择地点：</label>
        <select id="locationSelect" class="w-full p-2 border border-gray-300 rounded">
          <option value="">请选择地点</option>
          <option value="zhongMen">中门</option>
          <option value="dongMen">东门</option>
          <option value="tiYuChang">田径场</option>
          <option value="shuXingGongYu">疏馨公寓</option>
          <option value="zhenXianGongYu">真贤公寓</option>
          <option value="canTing">食堂</option>
          <option value="tiJian">体检中心</option>
          <option value="baoDaoRuKou">报到入口</option>
        </select>
      </div>
    </div>

    <div class="map-container" id="mapContainer">
      <!-- 地图图片 -->
      <img src="img/campus_map.jpg" alt="湖北理工学院校园地图" class="map-img" id="campusMap">
      
      <!-- 标记点 -->
      <div class="marker" data-location="zhongMen" style="left: 45%; top: 10%;">
        <i class="fas fa-map-marker-alt"></i>
      </div>
      <div class="marker" data-location="dongMen" style="left: 80%; top: 5%;">
        <i class="fas fa-map-marker-alt"></i>
      </div>
      <div class="marker" data-location="tiYuChang" style="left: 70%; top: 40%;">
        <i class="fas fa-map-marker-alt"></i>
      </div>
      <div class="marker" data-location="shuXingGongYu" style="left: 25%; top: 80%;">
        <i class="fas fa-map-marker-alt"></i>
      </div>
      <div class="marker" data-location="zhenXianGongYu" style="left: 35%; top: 90%;">
        <i class="fas fa-map-marker-alt"></i>
      </div>
      <div class="marker" data-location="canTing" style="left: 60%; top: 20%;">
        <i class="fas fa-map-marker-alt"></i>
      </div>
      <div class="marker" data-location="tiJian" style="left: 20%; top: 85%;">
        <i class="fas fa-map-marker-alt"></i>
      </div>
      <div class="marker" data-location="baoDaoRuKou" style="left: 85%; top: 15%;">
        <i class="fas fa-map-marker-alt"></i>
      </div>

      <div class="info-window" id="infoWindow">
        <h3 id="infoTitle">地点名称</h3>
        <p id="infoDesc">地点描述</p>
        <button class="nav-btn" id="viewDetails">查看详情</button>
        <button class="nav-btn ml-2" id="closeInfo">关闭</button>
      </div>
    </div>
  </div>

  <script src="script.js"></script>
</body>

</html>
